<template>
	<view class="signup-page">
		<view class="logo-name">
			<view class="text-center ftcolor2 fs-60 font-weight-bold">智村</view>
			<view class="text-center fs-40 ftcolor1">欢迎注册</view>
		</view>
		<view class="bgcolor1 rounded-lg border mx-3 px-3 pt-3 pb-5">
			
			<view class="flex align-center border-bottom pb-2">
				<text class="iconfont icon-dingwei fs-40 ftcolor1"></text>
				<uni-data-picker ref="picker" split="・" :clear-icon="false" :border="false" placeholder="请选择归属地"  popup-title="请选择所在地区"
					:localdata="regionsList" v-model="classes" @nodeclick="onnodeclick">
				</uni-data-picker>
			</view>
			<view class="flex align-center border-bottom py-5">
				<text class="iconfont icon-shouji mr-2  fs-40 ftcolor1"></text>
				<input type="text" class="flex-1 fs-30 ftcolor1" style="height: 50rpx;line-height: 50rpx;" v-model="mobile"
					placeholder="请输入账号" placeholder-class="placeholder">
			</view>
			<view class="flex align-center border-bottom py-5">
				<text class="iconfont icon-mima1 mr-2  fs-40 ftcolor1"></text>
				<input type="password" class="flex-1 fs-30 ftcolor1" style="height: 50rpx;line-height: 50rpx;"
					v-model="password" placeholder="请输入密码" placeholder-class="placeholder">
			</view>
			<view class="flex align-center border-bottom py-5">
				<text class="iconfont icon-yanzhengma mr-2  fs-40 ft3333"></text>
				<input type="text" class="flex-1 fs-30 ft3333" placeholder="请输入验证码" v-model="captcha_code"
					placeholder-class="placeholder">
				<view class="fs-28 ft3d3c" @click="getCode">
					<image :src="codeUrl" mode="widthFix" style="width: 100px;height: 26px;"></image>
				</view>
			</view>
			<!-- <view class="flex align-center border-bottom py-5">
				<text class="iconfont icon-yanzhengma mr-2  fs-40 ftcolor1"></text>
				<input type="password" class="flex-1 fs-30 ftcolor1" style="height: 50rpx;line-height: 50rpx;"
					v-model="repassword" placeholder="请再次输入密码" placeholder-class="placeholder">
			</view> -->


			<view class="rounded-circle fs-32 text-white flex align-center justify-center py-2 bgcolor2 mt-5" @click="submit">
				注册
			</view>
			<view class="flex align-center justify-center mt-4"><text class="fs-24 ftcolor3">已有账号，</text><text
					class="fs-24 ftcolor2" @click="signup">去登录</text></view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import BaseApi from '@/api/baseApi'
	export default {
		data() {
			return {
				region_id:'',
				mobile: '',
				password: '',
				repassword:'',
				classes:'',
				captcha_code: '',
				codeUrl: '',
				captcha_key: ''
			}
		},
		computed:{
			...mapGetters(['getRegions']),
			regionsList(){
				this.getRegions.forEach(i =>{
					if(i.children && i.children.length){
						i.children = i.children.filter(j => j.text !== '全部')
						i.children.forEach(k => {
							if(k.children && k.children.length){
								k.children = k.children.filter(l => l.text !== '全部')
							}
						})
					}
				})
				return this.getRegions
			}
		},
		created() {
			this.getCode()
		},
		methods: {
			getCode() {
				BaseApi.captcha().then(res => {
					this.codeUrl = res.data.captcha_image
					this.captcha_key = res.data.captcha_key
				})
			},
			submit() {
				
				if(!this.region_id){
					uni.$tools.toast('请先选择归属地')
					return
				}
				if(!this.mobile){
					uni.$tools.toast('请输入账号')
					return
				}
				if(!this.password){
					uni.$tools.toast('请输入密码')
					return
				}
				if(!this.captcha_code){
					uni.$tools.toast('请输入验证码')
					return
				}
				const data = {
					mobile:this.mobile,
					region_id:this.region_id,
					password:this.password,
					captcha_code: this.captcha_code,
					captcha_key: this.captcha_key
				}
				console.log('this.region_id',data)
				BaseApi.register(data).then(res => {
					uni.showToast({
						title: '注册成功'
					});
					let token = res.data.token;
					this.$store.commit("setToken", token);
					setTimeout(()=>{
						window.location.href = '/'
					},2000)
				}).catch(err=>{
					this.getCode()
				})
			},
			signup() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			onnodeclick(e) {
				const key = e.value.split('-')
				console.log('key----',e);
				if(e.level === 3){
					this.region_id = e.id
					// this.$store.commit("setCurRegion", e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.signup-page {
		.logo-name {
			padding: 100rpx 0;
		}
	}
</style>